{% extends "base.html" %}
{% from "macro.html" import toast with context %}
{% block head %}
    {{ super() }}
    <script src="{{ url_for('static', filename='js/clipboard.min.js') }}"></script>
    <style>
        pre{
            max-height: 620px;
        }
    </style>
{% endblock %}
{% block title %}
    RSS源订阅说明
{% endblock %}
{% block content %}
    <main>
        {{ toast() }}
        <div class="container mt-2">
            <h3 class="border-info border-bottom">RSS源订阅说明页面</h3>
            <div class="introduce-bg">
                <p class="mb-0">本页面提供说明本站RSS源订阅的一些基本功能，订阅用户可以操作下面的控件查看RSS源订阅效果。本站提供了所有文章RSS源订阅功能，
                    同时也支持单个类别文章RSS源订阅，具体RSS-FEED请操作下面的组件获取。</p>
            </div>
            <label for="category">类别:<select onchange="itemChange()" class="form-control" name="category" id="category">
                <option value="all">全部订阅</option>
                {% for cate in cates %}
                    <option value="{{ cate.id }}">{{ cate.name }}</option>
                {% endfor %}
            </select>
            </label>
            <div id="hintSpin" class="text-center hide">
                <i class="fa fa-spinner fa-pulse"></i>正在加载请稍后...
            </div>
            <p class="mb-1">订阅链接:</p>
            <div class="border border-info p-3 mb-3">
                <a id="rss-link" href="https://2dogz.cn/rss-feed/" target="_blank">https://2dogz.cn/rss-feed/</a>
                <button id="copyBtn" class="btn btn-sm btn-success float-right" data-clipboard-target="#rss-link">复制</button>
            </div>
            <pre class="border border-info p-1" id="xmlText" lang="xml">{{ response }}</pre>
        </div>
    </main>
    <script>
        let clipboard = new ClipboardJS('#copyBtn', {
            text: function () {
                return $("#rss-link").text();
            }
        });

        clipboard.on('success', function (e) {
            showToast('复制成功', 1000);
        });

        clipboard.on('error', function (e) {
            showToast(e, 1000);
        });

        function itemChange(){
            let cate_id = $("#category").val();
            $("#category").attr('disabled', true);
            $("#hintSpin").show();
            $.ajax({
                type: 'POST',
                url: '/rss-feed/display-rss/',
                data: {'cate-id': cate_id},
                success: function (res){
                    $("#rss-link").attr('href', res.url);
                    $("#rss-link").text(res.url);
                    $("#xmlText").text(res.xml);
                    $("#hintSpin").hide();
                    $("#category").attr('disabled', false);
                },
                error: function (res){
                    $("#hintSpin").hide();
                    $("#category").attr('disabled', false);
                }
            })
        }

    </script>
{% endblock %}